﻿<style>
	html{ height:100%;}
	body{ height:100%;}
	.errorMsg {
	    background:  url(images/alert.png) center no-repeat white;
		background-position: 5px 50%;
		text-align: left;
		padding: 2px 20px 2px 25px;
		border: 1px dotted red;
		display: none;
		width: 100px;
		margin-left: 10px;
		position: fixed;
		border-radius: 4px;
	}
</style>
<script type="text/javascript">
//定义全局的变量，给后台调用前台js留句柄
var validator;
$(document).ready(function() {
  //*************************下面是定义页面的一些js控件***********************************************
    $('#birthday').omCalendar({
        onSelect : function(){
            $('input[name=birthday]').focus();
        }
    });
    $('#payday').omCalendar({
        onSelect : function(){
            $('input[name=payday]').focus();
        }
    });
    $('#joinday').omCalendar({
        onSelect : function(){
            $('input[name=joinday]').focus();
        }
    });
    $('input[name=sex]').omCombo({			//初始化Combo
        dataSource : [ {text : '男', value : 'man'}, 
                       {text : '女', value : 'woman'}]
    });
    $('input[name=country]').omCombo({			//初始化Combo
        dataSource : [ {text : '中国', value : 'china'}, 
                       {text : '英国', value : 'england'}]
    });
    $('input[name=indsDep]').omCombo({			//初始化Combo
        dataSource : [ {text : '设备部', value : 'shebei'}, 
                       {text : '财务部', value : 'caiwu'}]
    });
    $('input[name=position]').omCombo({			//初始化Combo
        dataSource : [ {text : '总经理', value : 'manager'}, 
                       {text : '主管', value : 'master'}]
    });
    
    //*************************下面是校验代码主体***********************************************
    
    validator = $("#form1").validate({
	    rules : {
	        fileNo : {
	            required : true,
	            minlength : 11,
	            fileNoStart : true
	        },
	        userNo : {
	            required : true,
	            minlength : 5,
	            maxlength : 15
	        },
	        userName : "required",
	        sex : "required",
	        birthday : {
	            isDate : true
	        },
	        joinday : {
	            isDate : true
	        },
	        payday : {
	            isDate : true
	        },
	        country : {
	            countryLimit : true
	        },
	        phoneNo : {
	            isMobilPhone : true
	        },
	        email : "email",
	        totalWages : {
	            number : true,
	            max : 99999,
	            min : 3000
	        },
	        SelfEvaluation : {
	            minlength : 20,
	            maxlength : 200
	        },
	        compTelephone : {
	            isTelephone : true
	        },
	        homeTelephone : {
	            isTelephone : true
	        }
	       
	    },
	    messages : {
	        fileNo : {
	            required : "请输入档案编号",
	            minlength : "编号长度必须为11位"
	        },
	        userNo : {
	            required : "请输入职员编号",
	            minlength : "编号长度不能少于5位",
	            maxlength : "编号长度不能大于15位"
	        },
	        userName :{
	            required : "用户名必须输入"
	        } ,
	        sex : {
	            required : "性别必须选择"
	        },
	        email : "请输入正确的邮件格式",
	        totalWages : {
	            number : "请输入数字",
	            max : "给的太高了，你是火星人吧！",
	            min : "不够深圳市最低标准！"
	        },
	        SelfEvaluation : {
	            minlength : "至少输入20个字符",
	            maxlength : "最多只能输入200个字符"
	        }
	    },
	    //显示校验信息的容器，本示例使用<span class="errorMsg" />做为容器，建议使用容器来避免和其它组件的dom元素交叉的问题
	    //比如使用omCombo的时候如果不使用容器将会导致样式错乱，根本原因是combo是在input外面包裹一层span再添加样式组成，而校验
	    //框架默认会再input后面加label标签从而导致combo组件样式混乱。
	     errorPlacement : function(error, element) { 
            if(error.html()){
                $(element).parents().map(function(){
                    var attentionElement = $(this).children().eq(1);
                    if(this.tagName.toLowerCase()=='td'){ 
                        attentionElement.html(error);
                        attentionElement.css('display','none'); //覆盖默认显示方法，先隐藏消息，等鼠标移动上去再显示
                        attentionElement.prev().addClass("error-border");
                        attentionElement.prev().children("input").addClass("x-form-invalid");
                        if(attentionElement.prev().children().length <= 0)
                            attentionElement.prev().addClass("x-form-invalid");
                    }
                });
            }
        }, 
        //控制错误显示隐藏的方法，当自定义了显示方式之后一定要在这里做处理。
        showErrors: function(errorMap, errorList) {
            if(errorList && errorList.length > 0){
                $.each(errorList,function(index,obj){
                    var msg = this.message;
                    $(obj.element).parents().map(function(){
                        if(this.tagName.toLowerCase()=='td'){
                            var attentionElement =  $(this).children().eq(1);
                            attentionElement.show();
    	                    attentionElement.html(msg);
                        }
                    });
                });
            }else{
                $(this.currentElements).parents().map(function(){
                    if(this.tagName.toLowerCase()=='td'){
                        $(this).children().eq(1).hide();
                        $(this).children().eq(0).removeClass("error-border");
                    }else{
	                    $(this).removeClass("error-border");
                    }
                    $(this).children().eq(0).removeClass("x-form-invalid");
                });
            }
            this.defaultShowErrors();
        }
   });
    
    //*************************下面是自定义的校验规则************************************************
    
    //给输入框绑定鼠标经过事件，鼠标移动过去才显示校验信息
    $('.errorMsg').prev().bind('mouseover',function(e){
        //要有错误才显示
        if($(this).next().html().length > 0 && $(this).next().find("label").html().length > 0){
        	$(this).next().css('display','inline').css({'top':e.pageY+10 , 'left':e.pageX+5});
        	if($(this).next().find("label").css('display') == 'none'){
        	    $(this).next().hide();
        	}
        }
    }).bind('mouseout',function(){
        $(this).next().css('display','none');
    });
    //自定义校验规则，如果选择的是英国，则校验不通过
    $.validator.addMethod("countryLimit", function(value) {
        if(value == '英国')return false;
        return  true;
    }, '您是中国人，不能选英国');
    //自定义移动电话规则
    $.validator.addMethod("isMobilPhone", function(value) {
        if(value == '') return true;
        var regu =/(^[1][3][0-9]{9}$)|(^[1][5][0-9]{9}$)|(^[1][8][0-9]{9}$)|(^[0][1-9]{1}[0-9]{9}$)/; 
        var reg = new RegExp(regu);
        return reg.test(value);  // 手机验证 13x 15x 18x 以此类推
    }, '不是有效的手机号码');
    //编号必须以DABH-开头 
    $.validator.addMethod("fileNoStart", function(value) {
        if(value.substring(0,5) != 'DABH-')return false;
        return  true;
    }, '编号必须以DABH-开头');
    //电话号码有效性校验
    $.validator.addMethod("isTelephone", function(str) {
        if(str == '') return true;
        if (str.match(/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/) == null) {
            return false;
        }
        else {
            return true;
        }
    }, "不是有效的电话号码");
    //校验日期格式
    $.validator.addMethod("isDate", function(str) {
        if(str == '') return true;
        var value = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
        if (value == null) {
            return false;
        }
        else {
            var date = new Date(value[1], value[3] - 1, value[4]);
            return (date.getFullYear() == value[1] && (date.getMonth() + 1) == value[3] && date.getDate() == value[4]);
        }
    }, "日期格式不正确");
    
  //*************************下面是Ajax提交、计算自我评价字符个数、获取档案编号*********************
    
    $('#form1').submit(function() {
       if( $('#form1').valid()){
	        $(this).omAjaxSubmit({success:function(res){
	                if(res != '' && res != '1' && res != '0'){
	                    eval(res);
	                }else if(res == '1'){
	                    alert('提交成功！');
	                    $('button[type="reset"]').click();
	                    location.reload();
	                }else if(res == '0'){
	                    return ;
	                }
	            }
	       });
       }
      return false;//返回false,阻止浏览器默认行为
    });
    //计算自我评价的输入字符个数
    $('#SelfEvaluation').bind('keyup',function(key){
        var len = $('#SelfEvaluation').val().length;
        $('#count').html("您输入了 <b>"+len+"</b> 个字符");
    });
    //从后台获取档案编号
    $.ajax({
        url : '../../omButtonServlet?method=getFileNo',
        success : function(data){
            $("#fileNo").val(data);
            //设置值之后就校验正确性
            $("#form1").validate().element( "#fileNo" );
        }
    });
});
//这里定义方法供后台调用，显示错误信息
function showCodeError()
{
    validator.showErrors({"userNo": "编号必须以ZGBH开头"});
}
</script>

<div class="right clear" >
    <div id="nav_cont">
                 <h1 id="tag_1" class="cont_tag_show"></h1>
                 <form id="form1" method="post" action="../../omButtonServlet">
                 <input type="hidden" id="method" name="method" value="formValidateSubmit">
                   <table width="100%" border="0" class="grid_layout" cellspacing="0">
	                  <tr class="style1">
	                    <td width="10%" align="right"><span class="color_red">*</span>档案编号：</td>
	                    <td width="35%" colspan="3">
	                      <input type="text" name="fileNo" id="fileNo" class="input_text"/>
	                      <span class="errorMsg"></span>
	                    </td>
	                    <td width="10%" align="right"><span class="color_red">*</span>职工编号：</td>
	                    <td width="35%" colspan="3">
	                       <input type="text" id="userNo" name="userNo" class="input_text" />
	                       <span class="errorMsg"></span>
	                    </td>
	                  </tr>
	                  <tr>
	                    <td align="right">曾用姓名：</td>
	                    <td colspan="3"><input type="text" name="oldUserName" id="oldUserName" class="input_text"  /></td>
	                    <td align="right">英文姓名：</td>
	                    <td colspan="3"><input type="text" name="enUsername" id="enUsername"  class="input_text"  /></td>
	                  </tr>
	                  <tr>
	                    <td align="right"><span class="color_red">*</span>职工姓名：</td>
		                    <td colspan="3">
		                      <input type="text" name="userName" id="userName" class="input_text" />
		                      <span class="errorMsg"></span>
		                </td>
	                    <td align="right"><span class="color_red">*</span>性别：</td>
	                    <td colspan="3">
	                      <input name="sex"/>
	                      <span class="errorMsg"></span>
	                    </td>
	                    </tr>
	                    <tr>
	                    <td align="right">出生日期：</td>
	                    <td  colspan="3">
	                        <input type="text"   id="birthday" name="birthday" style=" color:#aaa;" />
	                        <span class="errorMsg"></span>
	                    </td>
	                     <td align="right">国籍：</td>
	                    <td colspan="3">
	                        <input name="country"/>
	                        <span class="errorMsg"></span>
	                    </td>
	                  </tr>
	                    <tr>
	                    <td colspan="8" align="right">
	                    	<div class="dashed"></div>
	                    </td>
	                    </tr>
	                    
	                    <tr>
		                    <td align="right">入职时间：</td>
		                    <td colspan="3">
		                        <input type="text" name="joinday" id="joinday"/>
		                        <span class="errorMsg"></span>    
		                    </td>
		                    <td align="right">工业部门：</td>
		                    <td colspan="3">
		                      <input name="indsDep" id="indsDep"/>
		                      <span class="errorMsg"></span>    
		                     </td>
		                     </tr>
		                     <tr>
		                     <td align="right">现住址：</td>
		                     <td colspan="3">
		                        <input name="nowAddress" id="nowAddress" class="input_text"/>
		                        <span class="errorMsg"></span>
                             </td>
		                     <td align="right">职务：</td>
		                     <td colspan="3">
		                        <input name="position" id="position"/>
		                        <span class="errorMsg"></span>   
		                    </td>
		                     
                        </tr> 
                  <tr>
                    <td align="right">移动电话：</td>
	                <td colspan="3">
	                       <input type="text" name="phoneNo" id="phoneNo" class="input_text" />
	                       <span class="errorMsg"></span>
	                </td>
                    <td align="right">办公电话：</td>
                    <td colspan="3">
                       <input type="text" name="compTelephone" id="compTelephone" class="input_text" />
                       <span class="errorMsg"></span>
                    </td>
                  </tr>
                  <tr>
                    <td align="right">现住址电话：</td>
                    <td colspan="3">
                       <input type="text" name="homeTelephone" id="homeTelephone" class="input_text" />
                       <span class="errorMsg"></span>   
                    </td>
                   <td align="right">电子邮箱：</td>
	                    <td colspan="3">
	                      <input type="text" name="email" id="email" class="input_text" />
	                      <span class="errorMsg"></span>
	               </td>
                  </tr>
                  <tr>
                    <td align="right">外语水平：</td>
                    <td colspan="3"><input type="text" name="textfield19" id="textfield19" class="input_text" /></td>
                    <td align="right">语种：</td>
                    <td colspan="3"><input type="text" name="textfield20" id="textfield20" class="input_text" /></td>
                  </tr>
                  <tr>
                    <td align="right">发薪日：</td>
                    <td colspan="3">
                      <input type="text" name="payday" id="payday" />
                      <span class="errorMsg"></span>
                    </td>
                    <td align="right">工资总额： </td>
	                    <td colspan="3">
	                       <input type="text" name="totalWages" id="totalWages" class="input_text" />
	                       <span class="errorMsg"></span>
	                </td>
                   </tr>
                    <tr>
                    <td align="right">自我评价：</td>
                    <td colspan="7">
                      <textarea name="SelfEvaluation" id="SelfEvaluation" class="textarea_text"  style="width:95.8%;"></textarea>
                      <span class="errorMsg"></span>
                      <div style="width: 100%" id="count"></div>
                    </td>
                    </tr>
	                </table>
                
	            <div class="separator"></div>
	            <div class="text_align_c pad ">
		    	  <button type="submit" class="button_u" onmousemove="this.className='button_f'" onmousedown="this.className='button_d'" onmouseout="this.className='button_u'">提交表单</button>&nbsp;
		          <button class="button_u" type="reset" onmousemove="this.className='button_f'" onmousedown="this.className='button_d'" onmouseout="this.className='button_u'">&nbsp;&nbsp;重置&nbsp;&nbsp;</button>&nbsp;
		        </div>
	        </form>
    </div>
	</div>